<template>
  <div class="report-list-container">
    <!-- 搜索框 -->
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索报告"
        style="width: 300px; border-radius: 5px;"
        clearable
      />
      <el-button @click="searchReports" type="primary" style="margin-left: 10px; padding: 0 20px;">搜索</el-button>
      <el-button @click="resetSearch" type="default" style="margin-left: 10px; padding: 0 20px;">重置</el-button>
    </div>

    <!-- 报告列表 -->
    <el-table :data="paginatedReports" style="width: 100%;" stripe>
      <el-table-column label="报告名称" prop="reportName"></el-table-column>
      <el-table-column label="公司名称" prop="companyName"></el-table-column>
      <el-table-column label="进度" prop="progress"></el-table-column>
      <el-table-column label="报告状态" prop="status"></el-table-column>
      <el-table-column label="报告简介" prop="reportDescription"></el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="goToReportReviewDetailPage(row.id)" type="primary">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-if="totalReports > 0"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalReports"
      @current-change="handlePageChange"
      layout="total, prev, pager, next, jumper"
      style="text-align: center; margin-top: 20px;"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { useRouter } from 'vue-router';
import { ReportReviewService } from '../api/ReportReview';
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'ReportList',
  components: {
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElPagination,
  },
  setup() {
    const searchQuery = ref('');  // 搜索框内容
    const reports = ref<any[]>([]);  // 存储所有报告
    const filteredReports = ref<any[]>([]);  // 存储筛选后的报告
    const paginatedReports = ref<any[]>([]);  // 存储当前分页的数据
    const totalReports = ref(0);  // 总报告数
    const currentPage = ref(1);  // 当前页数
    const pageSize = ref(8);  // 每页显示的条数
    const router=useRouter();

    // 获取报告数据
    const fetchReports = async () => {
  try {
    const response = await ReportReviewService.getAllReports();  // 调用接口
    console.log(response.data);
    if (response && response.data && Array.isArray(response.data)) {
      reports.value = response.data;  // 将返回的报告数据存储到 `reports`
      totalReports.value = reports.value.length;  // 设置总报告数
      filteredReports.value = reports.value;  // 默认显示所有报告
      handlePagination();  // 初次加载时进行分页
    } else {
      ElMessage.error('报告数据格式错误');
    }
  } catch (error) {
    ElMessage.error('报告加载失败');
    console.error(error);  
  }
};


   // 搜索报告
const searchReports = () => {
  if (searchQuery.value.trim() === '') {
    filteredReports.value = reports.value;
  } else {
    filteredReports.value = reports.value.filter((report) =>
      report.reportName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      report.companyName.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
    console.log(filteredReports.value);
  }
  handlePagination();  // 搜索后重新分页
};

    // 重置搜索框
const resetSearch = () => {
  searchQuery.value = '';
  filteredReports.value = reports.value;
  handlePagination();  // 重置后分页
};

    // 跳转到报告审核页面
    const goToReportReviewDetailPage = (reportId: number) => {
      console.log("跳转前的Id"+reportId);
      router.push({ name: 'ReportReviewDetail', params: { reportId: reportId} });
    };

    // 分页处理
    const handlePagination = () => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      paginatedReports.value = filteredReports.value.slice(start, end);
    };

    // 处理分页页码变化
    const handlePageChange = (page: number) => {
      currentPage.value = page;
      handlePagination();  // 页码变化时更新分页数据
    };

    // 页面加载时获取报告数据
    onMounted(fetchReports);

    return {
      searchQuery,
      filteredReports,
      paginatedReports,
      totalReports,
      currentPage,
      pageSize,
      searchReports,
      resetSearch,
      goToReportReviewDetailPage,
      handlePageChange,
    };
  },
});
</script>
<style scoped>
.report-list-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.el-input {
  width: 300px;
  border-radius: 5px;
  margin-right: 10px;
}

.el-button {
  padding: 0 20px;
  border-radius: 5px;
}

.cover-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.el-table {
  margin-top: 20px;
}

.el-table-column {
  text-align: center;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
